import {
  ProForm,
  ProFormSwitch,
  ProFormText,
} from "@ant-design/pro-components";
import { Button, Form, Tabs, message } from "antd";
import Card from "antd/es/card/Card";
import React, { useEffect, useState } from "react";
import { findSiteMenu, saveSiteMenu } from "../../../../../api";
import { useNavigate, useOutletContext, useParams } from "react-router-dom";
import { defaultSchema } from "../../../../../lowCode/core/defaultSchema";
import { AntDesignOutlined } from "@ant-design/icons";
import Preview from "../../../../../lowCode/core/Preview";
import Provider from "../../../../../lowCode/core/Provider";
import * as material from "../../../../../lowCode/material/index";

const App = () => {
  const [form] = Form.useForm();
  const { refresh } = useOutletContext<any>();
  const urlParams = useParams();
  const nav = useNavigate();
  const [items, setItems] = useState(defaultSchema);
  useEffect(() => {
    findSiteMenu({ id: urlParams.menuId }).then((res: any) => {
      form.setFieldsValue(res);
      if (res.schema) {
        setItems({ ...res.schema });
      }
    });
    console.log("sss");
  }, [urlParams]);
  const onFinish = async (values) => {
    // values
    await saveSiteMenu(values);
    refresh();
    message.success("保存成功");
  };
  return (
    <Provider
      items={items}
      components={
        {
          ...material
        }
      }
    >
      <div>
        <Tabs
          animated
          tabBarExtraContent={
            <Button
              icon={<AntDesignOutlined />}
              onClick={() => {
                nav(`/lowCode/design/${urlParams.menuId}`);
              }}
              type="link"
            >
              去设计
            </Button>
          }
          items={[
            {
              label: "页面设置",
              key: "12",
              children: (
                <div>
                  <Card>
                    <ProForm
                      submitter={{
                        searchConfig: {
                          submitText: "保存",
                        },
                      }}
                      layout="horizontal"
                      onFinish={onFinish}
                      form={form}
                    >
                      <ProFormText hidden name="id" label="页面名称" />
                      <ProFormSwitch name="hideInMenu" label="隐藏菜单" />
                      <ProFormSwitch name="fullScreen" label="全屏" />
                      <ProFormText width="md" name="name" label="页面名称" />
                      <ProFormText width="md" name="path" label="页面路径" />
                      <ProFormText width="md" name="icon" label="图标" />
                    </ProForm>
                  </Card>
                </div>
              ),
            },
            {
              label: "页面预览",
              key: "11",
              children: (
                <div>
                  <Preview />
                </div>
              ),
            },
          ]}
        />
      </div>
    </Provider>
  );
};
export default App;
